<template>
  <ion-page>
    <ion-header>
      <ion-toolbar color="light" class="pub-hearder">
       <div class="bg">
          <ion-title>
            <img src="@/assets/images/title.png" class="title" alt="">
          </ion-title>
       </div>
      </ion-toolbar>
    </ion-header>
    <ion-content no-padding>
      <div class="desc">
            坚持学习 <label class="total">66</label> 天 累计 <label class="total">3988</label> 题
        </div>
      <div id="output"></div>
      <div class="box">
        <label  id="open-modal" @click="popUpType = 'stsetList'">刷题设置<ion-icon :icon="chevronForwardOutline"></ion-icon></label>
        <img src="@/assets/images/bg1.png" class="title" alt="">
        <ion-row>
          <ion-col>
            <div class="num"><span>0</span>/15</div>
            <div>今日已做</div>
          </ion-col>
          <ion-col>
            <div class="num"><span>0</span>%</div>
            <div>正确率</div>
          </ion-col>
          <ion-col>
            <div class="num"><span>0</span>min</div>
            <div>做题时长</div>
          </ion-col>
        </ion-row>
        <button ion-button block @click="login()" >开始刷题</button>
      </div>
      <div class="box box2">
        <label  id="open-modal1" @click="popUpType = 'stsetList'">练习设置<ion-icon :icon="chevronForwardOutline"></ion-icon></label>
        <img src="@/assets/images/bg2.png" class="title" alt="">
        <ion-row>
          <ion-col>
            <div class="num"><span>0</span>/15</div>
            <div>今日已做</div>
          </ion-col>
          <ion-col>
            <div class="num"><span>0</span>%</div>
            <div>正确率</div>
          </ion-col>
          <ion-col>
            <div class="num"><span>0</span>min</div>
            <div>做题时长</div>
          </ion-col>
        </ion-row>
        <button ion-button block @click="login()" >开始刷题</button>
      </div>
      <ion-modal  ref="modal"  trigger="open-modal" :initial-breakpoint="initial" :breakpoints="[0, 1]">
        <div class="block">
          <div class="content popupcontent">
                <div class="popuptitle"
                    >刷题设置<u-icon
                        class="icon"
                        name="close"
                        color="#2E3033"
                        size="28"
                        @click="state.showPopUp = false"
                    ></u-icon
                ></div>
                <div
                    class="grad"
                    v-for="(item, index) in stsetList"
                    :key="index"
                >
                    <div
                        class="grad-name"
                        :class="{
                            notfirst: index !== 0
                        }"
                        ><label
                            class="arc"
                            :style="{ borderColor: '#CA3032' }"
                        ></label
                        >{{ item.title }}</div
                    >
                    <div
                        class="child"
                        :class="{
                            lastgrad: index == stsetList.length - 1
                        }"
                    >
                        <div
                            v-for="(item1, index) in item.children"
                            :key="index"
                            @click="gradChange(item, item1)"
                            :style="{
                                color: item.value === item1.id ? '#fff' : '#333',
                                background:
                                    item.value === item1.id
                                        ? '#CA3032'
                                        : '#f3f5f7'
                            }"
                        >
                            {{ item1.title }}
                        </div>
                    </div>
                </div>
                <div class="confrim-btn grad">
                    <div class="child">
                        <div>重置</div>
                        <div
                            @click="closeModel()"
                            :style="{
                                color: '#fff',
                                background: '#CA3032'
                            }"
                            >确定</div
                        >
                    </div>
                </div>
            </div>
        </div>
      </ion-modal>
      <ion-modal trigger="open-modal1" :initial-breakpoint="1" :breakpoints="[0, 1]">
        <div class="block" :style="{height: '330px'}">
          <div class="content popupcontent">
                <div class="popuptitle"
                    >刷题设置<u-icon
                        class="icon"
                        name="close"
                        color="#2E3033"
                        size="28"
                        @click="state.showPopUp = false"
                    ></u-icon
                ></div>
                <div
                    class="grad"
                    v-for="(item, index) in lxsetList"
                    :key="index"
                >
                    <div
                        class="grad-name"
                        :class="{
                            notfirst: index !== 0
                        }"
                        ><label
                            class="arc"
                            :style="{ borderColor: '#CA3032' }"
                        ></label
                        >{{ item.title }}</div
                    >
                    <div
                        class="child"
                        :class="{
                            lastgrad: index == lxsetList.length - 1
                        }"
                    >
                        <div
                            v-for="(item1, index) in item.children"
                            :key="index"
                            @click="gradChange(item, item1)"
                            :style="{
                                color: item.value === item1.id ? '#fff' : '#333',
                                background:
                                    item.value === item1.id
                                        ? '#CA3032'
                                        : '#f3f5f7'
                            }"
                        >
                            {{ item1.title }}
                        </div>
                    </div>
                </div>
                <div class="confrim-btn grad">
                    <div class="child">
                        <div>重置</div>
                        <div
                            @click="closeModel()"
                            :style="{
                                color: '#fff',
                                background: '#CA3032'
                            }"
                            >确定</div
                        >
                    </div>
                </div>
            </div>
        </div>
      </ion-modal>
      <!-- <canvas class="vex-tabdiv"
       data-width="600"
        data-scale="1.0"
        data-editor="false"
        data-player="false"
        data-tab-stave-lines="5">
        options space=20
        tabstave notation=true
        notes :q 5/4 6/4 7/4 | 8/4 9/4 10/4
       ></canvas>

       <canvas id="paper"
       data-width="600"
        data-scale="1.0"
        data-editor="false"
        data-player="false"
        data-tab-stave-lines="5">
        options space=20
        tabstave notation=true
        notes :q 5/4 6/4 7/4 | 8/4 9/4 10/4
       ></canvas> -->
       <staff-keyboard @postText="getText($event)"></staff-keyboard>
    </ion-content>
  </ion-page>
</template>

<script lang="ts">
import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonRow, IonCol, IonModal } from '@ionic/vue';
import { toRefs, reactive, onMounted, ref } from 'vue';
import { chevronForwardOutline } from 'ionicons/icons';
import abcjs from "abcjs";
import 'abcjs/abcjs-audio.css';
import staffKeyboard from '@/components/staff-keyboard/staff-keyboard.vue'
// import * as VexTab from 'vextab/dist/main.dev.js';
import Vex from 'vexflow';
//  import vextab from 'vextab/src/main.js';
declare const vextab: any;
// import * as vextab from 'vextab';
//  'vextab'
export default {
  components: {
    IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonRow, IonCol, IonModal, staffKeyboard
  },
  setup(props: any) {
    // console.log(vextab,'======VexTab=====');
    const width = window.innerWidth - 3;
    const modal = ref();
    const state = reactive({
      openmodal: 'open-modal',
      modal,
      initial: 1,
      popUpType: 'stsetList',
      stsetList: [
        {
            title: '题型选择',
            value: 1,
            key: 'types',
            children: [
                {
                    title: '乐理',
                    id: 1
                },
                {
                    title: '练耳',
                    id: 2
                }
            ]
        },
        {
            title: '题型设置',
            value: 1,
            key: 'types1',
            children: [
                {
                    value: 1,
                    title: '按时长',
                    id: 1,
                    children: [
                        {
                            title: '10',
                            id: 1
                        },
                        {
                            title: '30',
                            id: 2
                        },
                        {
                            title: '1小时',
                            id: 3
                        },
                        {
                            title: '不限',
                            id: 4
                        }
                    ]
                },
                {
                    value: 2,
                    title: '按数量',
                    name: 1,
                    id: 2,
                    children: [
                        {
                            title: '5',
                            id: 1
                        },
                        {
                            title: '10',
                            id: 2
                        },
                        {
                            title: '20',
                            id: 3
                        },
                        {
                            title: '30',
                            id: 4
                        },
                        {
                            title: '50',
                            id: 5
                        },
                        {
                            title: '不限',
                            id: 6
                        }
                    ]
                }
            ]
        },
        {
            title: '按时长',
            id: 1,
            value: 1,
            name: 1,
            children: [
                {
                    title: '10',
                    id: 1
                },
                {
                    title: '30',
                    id: 2
                },
                {
                    title: '1小时',
                    id: 3
                },
                {
                    title: '不限',
                    id: 4
                }
            ]
        }
    ],
    lxsetList: [
        {
            title: '题型设置',
            value: 1,
            key: 'types1',
            children: [
                {
                    value: 1,
                    title: '按时长',
                    id: 1,
                    children: [
                        {
                            title: '10',
                            id: 1
                        },
                        {
                            title: '30',
                            id: 2
                        },
                        {
                            title: '1小时',
                            id: 3
                        },
                        {
                            title: '不限',
                            id: 4
                        }
                    ]
                },
                {
                    value: 2,
                    title: '按数量',
                    name: 1,
                    id: 2,
                    children: [
                        {
                            title: '5',
                            id: 1
                        },
                        {
                            title: '10',
                            id: 2
                        },
                        {
                            title: '20',
                            id: 3
                        },
                        {
                            title: '30',
                            id: 4
                        },
                        {
                            title: '50',
                            id: 5
                        },
                        {
                            title: '不限',
                            id: 6
                        }
                    ]
                }
            ]
        },
        {
            title: '按时长',
            id: 1,
            value: 1,
            name: 1,
            children: [
                {
                    title: '10',
                    id: 1
                },
                {
                    title: '30',
                    id: 2
                },
                {
                    title: '1小时',
                    id: 3
                },
                {
                    title: '不限',
                    id: 4
                }
            ]
        }
    ],
    })
    // const { VexTab, Artist, Vex } = vextab; 
    //   const Vex = new VexFlow();
      // const { Renderer, Stave, StaveNote, Voice, Formatter } = VexFlow.Flow;
      onMounted(() => {
//         const Renderer = Vex.Flow.Renderer;
//         const renderer = new Renderer(document.querySelectorAll('.vex-tabdiv')[0], Renderer.Backends.CANVAS);
//         const artist = new Artist(10, 10, window.innerWidth, { scale: 1});
//         console.log(artist,'==================');
//         const tab = new VexTab(artist);
//         //   C-D-E-F-G-A-B/4| :w 5/4 | :h 5/4 | :4 5/4| :8 5/4 :8 5/4| :16 5/4 :16 5/4| :32 5/4 :32 5/4
//         try {
//     tab.parse(` tabstave notation=true tablature=false time=1/16
//     notes (C/4.G/4.D/4) |  :8 5s7s8/5 ^3^ | :8d 5/4 :16 5/5 | :wd ## | :hd ## | :4d ##  | :8d ## |:16d ## | :32d ## | C-D-E-F-G-A-B/4 :w 5/4 :2 5/4 :4 5/4 :8 5/4 :16 5/4:32 5/4|`); //  :h ## | :4 ## | :8 ## |:16 ## |:32 ## |
//     artist.render(renderer);
// } catch (e) {
//     console.error(e);
// }

        // try {
        //     tab.parse('tabstave').val());
        //     artist.render(renderer);
        // } catch (e) {
        //     console.error(e);
        // }
        // const VexTab = Vex.Flow.VexTab;
    // const div = document.querySelector('.vex-tabdiv');
    // new VexTab(div).init();
        
//     | C> D- E | F-G- A |: [a1e1f1] (3[ABCD][ABCD][ABCD][ABCD] D6 D7|"fff"C "sf"D "fz"E|"Em"EB{c}BA B7 EB  (3B/B/B/B/|~B2 AB "多个音符相连单个附点"d>"多个音符相连多个附点"B>>AG|"D"FDAD B<DA<<D|FDAD dAFD|
// "Em1"EBBA B2 EB|B2 B6 B7 AB defg|af"升"^e"重升"^^c "还原"=B"降"_A"重降"__F|"Em"DEFD E2:|
// |:gf|"Em"eB B2 efge|eB B2 gedB|"D"A2 FA DAFA|A2 FA defg|
//  "Em"eB "相邻音符连线"B2-C4 eBgB|eB "多个音符连线"(B2 defg)|"D"afe^c dBAF|"Em"DEFD "减8va"E2,,"加8va"B2'' E/8 a/4 A/2 A A2 A4 z/8 z/4 z/2 z z2 z4 ~A ~c .A .c vA vc uA uc Hc Lc Jc Mc Oc Pc Rc Sc Tc tc !c +c+ =sc A/8>>|
        const el = document.getElementById('output');
        // | C> D- E | F-G- A |: [a1e1f1] (3[ABCD][ABCD][ABCD][ABCD] D6 D7|DEFD "减8va"E2,,"加8va"B2'' A/8 A/4 A/2 A A2 A4  |
        abcjs.renderAbc("output", `X: 1
M: 1/4
L:1/4
K: Bbm
    A/8>>  A/4 |`,{ scrollHorizontal: true, viewportHorizontal: true,  staffwidth: width, responsive: "resize", scale: 1.2}); // responsive: "resize"  d23 d24 d25 d26 d27 d28 d29 d30 d31
        // init();
        // init1();
        // init2();
    })
    function closeModel(){
      modal.value.$el.dismiss();
    }

    const gradChange = (parent: any, child: any) => {
      parent.value = child.id
      if (child.children) {
          (state as any)[state.popUpType][state.popUpType === 'stsetList' ? 2 : 1] = child;
          (state as any)[state.popUpType][state.popUpType === 'stsetList' ? 2 : 1].value =
              child.children[0].id;
          console.log(state.stsetList)
      }
  }

  function getText(data: string){
    console.log(data,'========getText=======')
    const el = document.getElementById('output');
        abcjs.renderAbc("output", `X: 1
M: 1/4
L:1/4
K: Bbm
  ${data}}`,{ scrollHorizontal: true, viewportHorizontal: true,  staffwidth: width, responsive: "resize", scale: 1.2}); 
  }
    return {
      ...toRefs(state),
      chevronForwardOutline,
      modal,
      closeModel,
      gradChange,
      getText
    }  
  }
}
</script>
<style lang="scss" scoped>
ion-header{
  ion-toolbar{
    --padding-top: 0px;
    --padding-bottom: 0px;
    --padding-start: 0px;
    --padding-end: 0px;
  }
  .bg{
    background: url('../../assets/images/titlebg.png');
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 44px;
  }
  .title{
    width: 65px;
  }
}
ion-content{
    --background: #fff;
    --padding-top: 10px;
    --padding-end: 10px;
    --padding-start: 10px;
    .desc {
        font-family: PingFangSC-Regular;
        font-weight: 400;
        font-size: 14px;
        color: #939699;
        .total {
            font-family: DINPro-Medium;
            font-weight: bold;
            font-size: 16px;
            color: #1e1e1f;
            margin: 0px 5px;
        }
    }
    .box{
      width: 96%;
      margin: 2% auto 2% 10px;
      border-radius: 10px;
      position: relative;
      height: 268px;
      margin-bottom: 20px;
      img{
        max-height: 268px;
      }
      label{
        position: absolute;
        right: 14px;
        top: 10px;
        color: #fff;
        font-size: 14px;
        ion-icon{
          position: relative;
          top: 2px;
        }
      }
      ion-row{
        position: absolute;
        width: calc(100% - 148px);
        left: 22px;
        top: 120px;
        font-size: 14px;
        text-align: center;
        color: #939699;
        .num{
          color: #333;
          margin-bottom: 10px;
          span{
            color: #CA3032;;
          }
        }
      }
      button {
        width: 90%;
        height: 40px;
        border-radius: 10px;
        color: #fff;
        background: #CA3032;
        position: absolute;
        bottom: 20px;
        left: 5%;
      }
    }
    .box2{
      button{
        background: #143268;
      }
    }
  }

  .block {
    width: 100%;
    height: 400px;
    padding: 0px 15px;
  }

  ion-modal {
    --height: auto;
  }

  .popupcontent {
    position: relative;
    .popuptitle {
        margin-top: 20px;
        font-family: PingFangSC-Medium;
        font-weight: 500;
        font-size: 16px;
        color: #2e3033;
        letter-spacing: 0;
        text-align: center;
        position: relative;
        .icon {
            position: absolute;
            right: 20rpx;
            top: 30rpx;
        }
    }
    .confrim-btn {
        position: absolute;
        bottom: -80px;
        width: 100%;
    }
}

.grad-name {
    font-family: PingFangSC-Medium;
    font-weight: 500;
    font-size: 15px;
    color: #333333;
    // margin: 30rpx 0rpx 30rpx;
    margin-bottom: 15px;
    .arc {
        display: inline-block;
        width: 4px;
        height: 4px;
        background: #ffffff;
        border: 4rpx solid #fff;
        border-radius: 50%;
        margin-right: 4px;
        position: relative;
        top: -3px;
    }
}
.grad {
    padding: 0rpx 20px;
}
.notfirst {
    margin-top: 15px;
}
.child {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    div {
        background: #f3f5f7;
        border-radius: 15px;
        height: 30px;
        font-size: 12px;
        color: #333333;
        letter-spacing: 0;
        text-align: center;
        line-height: 30px;
    }
}
.lastgrad {
    grid-template-columns: repeat(3, 1fr);
}
</style>